<template>
  <div class="pet-info">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/pet-center'}">宠物中心</el-breadcrumb-item>
      <el-breadcrumb-item>宠物信息</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 头部 -->
    <el-header class="manage-header">
      <div class="title">
        <i class="el-icon-star-on"></i>
        我的宠物档案
      </div>
      <el-button
          type="primary"
          icon="el-icon-plus"
          @click="openAddDialog">
        添加新宠物
      </el-button>
    </el-header>

    <!-- 主体内容 -->
    <el-main class="manage-main">
      <!-- 宠物列表 -->
      <el-row :gutter="20">
        <el-col
            v-for="pet in petList"
            :key="pet.id"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6">
          <el-card class="pet-card">
            <div class="pet-avatar">
              <img :src="pet.avatar" alt="宠物头像">
              <div class="pet-badge" :class="pet.gender">
                {{ pet.gender === 'male' ? '♂' : '♀' }}
              </div>
            </div>
            <div class="pet-info">
              <h3>{{ pet.name }}</h3>
              <el-descriptions :column="1">
                <el-descriptions-item label="品种">
                  {{ pet.breed }}
                </el-descriptions-item>
                <el-descriptions-item label="年龄">
                  {{ pet.age }}岁
                </el-descriptions-item>
                <el-descriptions-item label="体重">
                  {{ pet.weight }}kg
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="pet-actions">
              <el-button
                  type="text"
                  @click="openEditDialog(pet)">
                编辑
              </el-button>
              <el-button
                  type="text"
                  @click="showDetail(pet)"
                  style="color: #67C23A;">
                查看详情
              </el-button>
              <el-button
                  type="text"
                  style="color: #F56C6C;"
                  @click="confirmDelete(pet)">
                删除
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 添加/编辑对话框 -->
      <el-dialog
          :title="dialogTitle"
          :visible.sync="dialogVisible"
          width="600px">
        <el-form
            :model="currentPet"
            :rules="rules"
            ref="petForm"
            label-width="100px">
          <el-form-item label="宠物名字" prop="name">
            <el-input v-model="currentPet.name"></el-input>
          </el-form-item>

          <el-form-item label="宠物类型" prop="type">
            <el-select v-model="currentPet.type">
              <el-option
                  v-for="item in petTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="品种" prop="breed">
            <el-input v-model="currentPet.breed"></el-input>
          </el-form-item>

          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="currentPet.gender">
              <el-radio label="male">男孩</el-radio>
              <el-radio label="female">女孩</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="年龄" prop="age">
            <el-input-number
                v-model="currentPet.age"
                :min="0"
                :max="30"></el-input-number>
          </el-form-item>

          <el-form-item label="体重(kg)" prop="weight">
            <el-input-number
                v-model="currentPet.weight"
                :min="0"
                :step="0.5"></el-input-number>
          </el-form-item>

          <el-form-item label="绝育状态">
            <el-switch v-model="currentPet.isNeutered"></el-switch>
          </el-form-item>

          <el-form-item label="宠物照片">
            <el-upload
                action="https://your-upload-api.com"
                list-type="picture-card"
                :file-list="fileList"
                :on-success="handleAvatarSuccess">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">保存</el-button>
        </span>
      </el-dialog>

      <!-- 详情抽屉 -->
      <el-drawer
          title="宠物详情"
          :visible.sync="drawerVisible"
          direction="rtl"
          size="50%">
        <div v-if="selectedPet" class="pet-detail">
          <div class="detail-header">
            <img :src="selectedPet.avatar" class="detail-avatar">
            <h2>{{ selectedPet.name }}</h2>
          </div>
          <el-tabs>
            <el-tab-pane label="基本信息">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="品种">
                  {{ selectedPet.breed }}
                </el-descriptions-item>
                <el-descriptions-item label="年龄">
                  {{ selectedPet.age }}岁
                </el-descriptions-item>
                <el-descriptions-item label="性别">
                  {{ selectedPet.gender === 'male' ? '男孩' : '女孩' }}
                </el-descriptions-item>
                <el-descriptions-item label="体重">
                  {{ selectedPet.weight }}kg
                </el-descriptions-item>
                <el-descriptions-item label="绝育状态">
                  {{ selectedPet.isNeutered ? '已绝育' : '未绝育' }}
                </el-descriptions-item>
              </el-descriptions>
            </el-tab-pane>

            <el-tab-pane label="疫苗记录">
              <el-timeline>
                <el-timeline-item
                    v-for="(vaccine, index) in selectedPet.vaccines"
                    :key="index"
                    :timestamp="vaccine.date">
                  {{ vaccine.name }}
                  <el-tag type="success">已接种</el-tag>
                  <p>接种机构：{{ vaccine.clinic }}</p>
                </el-timeline-item>
              </el-timeline>
            </el-tab-pane>

            <el-tab-pane label="健康记录">
              <el-collapse>
                <el-collapse-item
                    v-for="(record, index) in selectedPet.medicalRecords"
                    :key="index"
                    :title="record.date + ' ' + record.title">
                  <div class="record-content">
                    <p>诊断结果：{{ record.diagnosis }}</p>
                    <p>治疗方案：{{ record.treatment }}</p>
                    <p>主治医生：{{ record.doctor }}</p>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-drawer>
    </el-main>
  </div>
</template>

<script>
export default {
  name: 'PetManagement',
  data() {
    return {
      petList: [
        {
          id: 1,
          name: '豆豆',
          type: 'dog',
          breed: '金毛寻回犬',
          gender: 'male',
          age: 3,
          weight: 28.5,
          isNeutered: true,
          avatar: require('@/assets/images/img.png'),
          vaccines: [
            { date: '2023-03-15', name: '狂犬疫苗', clinic: '爱心宠物医院' }
          ],
          medicalRecords: [
            {
              date: '2023-05-20',
              title: '肠胃不适',
              diagnosis: '急性肠胃炎',
              treatment: '输液治疗+处方粮',
              doctor: '王医生'
            }
          ]
        }
      ],
      dialogVisible: false,
      drawerVisible: false,
      currentPet: this.emptyPet(),
      selectedPet: null,
      petTypes: [
        { value: 'dog', label: '犬类' },
        { value: 'cat', label: '猫类' },
        { value: 'other', label: '其他' }
      ],
      rules: {
        name: [{ required: true, message: '请输入宠物名字', trigger: 'blur' }],
        type: [{ required: true, message: '请选择宠物类型', trigger: 'change' }],
        breed: [{ required: true, message: '请输入品种', trigger: 'blur' }],
        age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
        weight: [{ required: true, message: '请输入体重', trigger: 'blur' }]
      }
    }
  },
  computed: {
    dialogTitle() {
      return this.currentPet.id ? '编辑宠物信息' : '添加新宠物'
    }
  },
  methods: {
    emptyPet() {
      return {
        id: null,
        name: '',
        type: '',
        breed: '',
        gender: 'male',
        age: 1,
        weight: 5,
        isNeutered: false,
        avatar: ''
      }
    },
    openAddDialog() {
      this.currentPet = this.emptyPet()
      this.dialogVisible = true
    },
    openEditDialog(pet) {
      this.currentPet = { ...pet }
      this.dialogVisible = true
    },
    submitForm() {
      this.$refs.petForm.validate(valid => {
        if (valid) {
          if (!this.currentPet.id) {
            this.currentPet.id = Date.now()
            this.petList.push(this.currentPet)
          } else {
            const index = this.petList.findIndex(p => p.id === this.currentPet.id)
            this.petList.splice(index, 1, this.currentPet)
          }
          this.dialogVisible = false
          this.$message.success('保存成功')
        }
      })
    },
    confirmDelete(pet) {
      this.$confirm(`确定要删除 ${pet.name} 的信息吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.petList = this.petList.filter(p => p.id !== pet.id)
        this.$message.success('删除成功')
      })
    },
    showDetail(pet) {
      this.selectedPet = pet
      this.drawerVisible = true
    },
    handleAvatarSuccess(res, file) {
      this.currentPet.avatar = URL.createObjectURL(file.raw)
    }
  }
}
</script>

<style scoped>
.manage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #ebeef5;
}

.title {
  font-size: 24px;
  color: #303133;
}

.pet-card {
  margin-bottom: 20px;
  transition: all 0.3s;
}

.pet-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

.pet-avatar {
  position: relative;
  text-align: center;
  margin-bottom: 15px;
}

.pet-avatar img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

.pet-badge {
  position: absolute;
  right: 30px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  font-size: 18px;
  color: white;
}

.pet-badge.male {
  background: #409EFF;
}

.pet-badge.female {
  background: #F56C6C;
}

.pet-info {
  margin-bottom: 15px;
}

.pet-actions {
  text-align: center;
  margin-top: 15px;
  border-top: 1px solid #ebeef5;
  padding-top: 15px;
}

.detail-header {
  text-align: center;
  margin-bottom: 30px;
}

.detail-avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-bottom: 15px;
}

.record-content {
  padding: 10px;
  background: #f8f9fa;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .manage-header {
    flex-direction: column;
    padding: 15px;
  }

  .title {
    margin-bottom: 15px;
  }

  .el-drawer {
    width: 100% !important;
  }
}
</style>